<template>
	<div style="height: 100%;">

		<el-dialog v-if="visible3" :visible.sync="visible3" top="2%" title="产污环节" width="50%">
			<el-tabs v-model="activeName">
				<el-tab-pane label="产污环节" name="first">
					<el-form ref="form3" :model="gasLinkParams" :rules="formRules3" label-width="140px">
						<el-form-item label="场地" prop="areaId">
							<el-select :value="gasLinkParams.areaId" style="width: 100%;" filterable @change="getEquipmentList">
								<el-option :label="item.areaName" :value="item.referId" v-for="(item,index) in areaList">
								</el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="产生源" prop="sourceId" v-if="gasLinkParams.areaId">
							<el-select v-model="gasLinkParams.sourceId" style="width: 100%;" filterable @change="$forceUpdate()">
								<el-option :label="item.equipmentName" :value="item.id" v-for="(item,index) in sourceList">
								</el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="产污类别" prop="linkType">
							<el-select :value="gasLinkParams.linkType" style="width: 100%;" @change="getEntPollutionList">
								<el-option label="废气" value="GAS_LINK" />
								<el-option label="废水" value="WATER_LINK" />
							</el-select>
						</el-form-item>

						<el-form-item label="产污环节名称" prop="linkName">
							<el-input v-model="gasLinkParams.linkName"></el-input>
						</el-form-item>

						<el-form-item label="产污环节编号" prop="linkCode">
							<el-input v-model="gasLinkParams.linkCode"></el-input>
						</el-form-item>

						<div class="displayFlex" v-for="(item,index) in gasLinkParams.linkPollutionList" :key="index">
							<el-form-item :label="'污染物'+(index+1)" style="flex: 2;">
								<el-select v-model="item.pollutionId" style="width: 100%;" placeholder="请选择" filterable>
									<el-option v-for="item2 in pollutionList" :key="item2.id" :label="item2.pollutionName"
										:value="item2.id">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="是否巡检" prop="isInspect" style="flex: 1;">
								<el-radio-group v-model="item.isInspect" class="displayFlex">
									<el-radio :label="true" border style="margin-right: 0;">巡检</el-radio>
									<el-radio :label="false" border>不巡检</el-radio>
								</el-radio-group>
							</el-form-item>
							<i class="el-icon-remove-outline" @click="gasLinkParams.linkPollutionList.splice(index,1)"
								style="color: brown;font-size: 30px;padding-bottom: 20px;margin-left: 20px;"></i>
						</div>
						<el-form-item label="" prop="linkCode">
							<el-button type="primary" icon="el-icon-plus"
								@click="gasLinkParams.linkPollutionList.push({ pollutionId:'',isInspect:false})">添加污染物</el-button>
						</el-form-item>

					</el-form>

					<div style="text-align: center;" slot="footer">
						<el-button type="primary" @click="saveGasLink(1)" style="width: 100px;">保存</el-button>
					</div>
				</el-tab-pane>

				<el-tab-pane label="巡检项" name="second">
					<template v-if="linkItemList.data.length > 0">
						<el-tag v-for="(item,index) in linkItemList.data" :key="index" effect="dark" closable class="point"
							@close="deleteInspectItem(item,index)" @click="xunjian.params = item,xunjian.show = true"
							style="margin-right: 10px;margin-bottom: 10px;">
							{{item.inspectItemName}}
						</el-tag>
					</template>
					<el-button style="margin-left: 10px;height: 32px;line-height: 30px; padding-top: 0; padding-bottom: 0;"
						size="small" @click="xunjian.show=true,xunjian.params = $options.data().xunjian.params">
						+ 添加巡检项
					</el-button>
				</el-tab-pane>
			</el-tabs>

		</el-dialog>


		<el-dialog :visible.sync="xunjian.show" top="2%" title="巡检项信息" :modal="false" width="30%">
			<el-form :model="xunjian.params" label-width="140px">
				<el-form-item label="巡检项名称" prop="inspectItemName" required>
					<el-input v-model="xunjian.params.inspectItemName" placeholder="巡检项信息"></el-input>
				</el-form-item>

				<el-form-item label="记录值类型" prop="valueType">
					<el-select v-model="xunjian.params.valueType" placeholder="记录值类型" style="width: 100%;">
						<el-option label="数值" value="NUMBER" />
						<el-option label="状态" value="STATE" />
					</el-select>
				</el-form-item>

				<el-form-item label="说明" prop="remark">
					<el-input v-model="xunjian.params.remark" placeholder="说明"></el-input>
				</el-form-item>

				<div style="text-align: center;margin-top: 50px;">
					<el-button type="primary" @click="saveXunJian(1)">保存</el-button>
				</div>
			</el-form>
		</el-dialog>

	</div>
</template>

<script>
	let that
	export default {
		props: {
			linkType: {
				type: String,
				default: "GAS_LINK"
			}
		},
		data() {
			return {
				activeName: "first",
				visible3: false,
				gasLinkParams: {
					linkType: 'GAS_LINK',
					linkPollutionList: [{
						pollutionId: '',
						isInspect: false,
					}],
				},
				params: {},
				linkList: [],
				areaList: [],
				sourceList: [],
				pollutionList: [],
				formRules3: {
					areaId: [{
						required: true,
						message: '场地',
						trigger: ['change', 'blur']
					}],

					linkCode: [{
						required: true,
						message: '产污环节编号',
						trigger: 'blur'
					}],
					linkName: [{
						required: true,
						message: '产污环节名称',
						trigger: 'blur'
					}],
				},
				getParams: {
					linkName: '', // 产污环节名称
					linkType: '', // 产污环节类型
					busiStatus: 'IN_USE', // 启用状态
				},
				xunjian: {
					show: false,
					params: {
						linkId: '', // 防治设施id
						inspectItemName: '', // 巡检项名称
						valueType: 'NUMBER', // 记录值类型
						remark: ''
					}
				},
				linkItemList: {
					id: '',
					show: false,
					data: []
				},
				_node: {},
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token
			that.gasLinkParams.linkType = that.linkType
			that.getParams.linkType = that.linkType

			//that.pageLink()
			that.getAreaList()
			that.getEquipmentList()
			that.getEntPollutionList()
		},

		methods: {

			addData() {
				that.visible3 = true
				that.gasLinkParams = that.$options.data().gasLinkParams
			},

			editData(node) {
				if(node) that._node = node
				that.ajax({
					url: '/linkMng/getGasLinkById?ticketId=' + that.params
						.ticketId,
					data: {
						linkId: that._node.id
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data) {
							that.gasLinkParams = result.data
							that.linkItemList.data = result.data.inspectItemList
							that.visible3 = true
							that.getEntPollutionList()
							that.getEquipmentList()
						}
					},
				})
			},

			showXunJianDia(item) {
				that.linkItemList.show = true
				that.linkItemList.data = item.inspectItemList
				item.linkPollutionList = item.linkPollutionList || []
				that.gasLinkParams = item
			},

			//保存巡检项
			saveXunJian() {
				if (!that.xunjian.params.inspectItemName) return that.$message.error("请填写完整")
				that.xunjian.params.linkType = that.gasLinkParams.linkType
				that.xunjian.params.linkId = that.gasLinkParams.id
				that.ajax({
					url: '/linkMng/saveLinkItem',
					data: JSON.stringify(that.xunjian.params),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.linkItemList.show = false
							that.xunjian.show = false
							that.editData()
							that.$emit("success", true)
						}
					},
				})
			},


			deleteInspectItem(item, index) {
				this.$confirm('是否确定删除此巡检项?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: '/linkMng/deleteLinkItem',
						data: JSON.stringify({
							id: item.id,
							linkType: that.gasLinkParams.linkType
						}),
						contentType: 'application/json',
						success: function(result) {
							if (result.data) {
								that.linkItemList.data.splice(index, 1)
								that.$emit("success", true)
							}
						},
					})
				})
			},

			//保存原辅料
			saveGasLink() {
				this.$refs['form3'].validate(function(valid) {
					if (valid) {
						that.ajax({
							url: 'linkMng/saveLink',
							data: JSON.stringify(that.gasLinkParams),
							contentType: 'application/json',
							success: function(result) {
								if (result.data) {
									that.$emit("success", true)
									that.visible3 = false
									return that.$message({
										message: '保存成功！',
										type: 'success'
									});
								}
							},
						})
					}
				})
			},


			getEntPollutionList(value) {
				if (value) {
					if (value != that.gasLinkParams.linkType) {
						that.gasLinkParams.linkPollutionList = []
					}
					that.gasLinkParams.linkType = value
					that.$forceUpdate()
				}
				let thisParams = {
					pollutionType: 'GAS_POLLUTION'
				}
				if (that.gasLinkParams.linkType == "WATER_LINK") thisParams.pollutionType = 'WATER_POLLUTION'
				that.ajax({
					url: '/entPollution/getEntPollutionList',
					data: JSON.stringify(thisParams),
					contentType: 'application/json',
					success: function(result) {
						that.pollutionList = result.data
					},
				})
			},

			getAreaList() {
				that.ajax({
					url: '/linkMng/getAreaList',
					data: JSON.stringify({}),
					contentType: 'application/json',
					success: function(res) {
						that.areaList = res.data
					}
				});
			},

			getEquipmentList(value) {
				if (value) {
					if (value != that.gasLinkParams.areaId) {
						that.gasLinkParams.sourceId = ""
					}
					that.gasLinkParams.areaId = value
					that.$forceUpdate()
				}
				that.ajax({
					url: '/linkMng/getEquipmentList',
					data: {
						workshopId: that.gasLinkParams.areaId
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(res) {
						that.sourceList = res.data
					}
				});
			},

			pageLink() {
				that.ajax({
					url: '/linkMng/pageLink?ticketId=' + that.$store.state.token + '&pageIndex=1&pageSize=999',
					data: JSON.stringify(that.getParams),
					contentType: 'application/json',
					success: function(data) {
						that.linkList = data.data.records;
						for (let item of that.linkList) {
							item.linkPollutionList = item.linkPollutionList || []
						}
					}
				});
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>